<template>
  <ElCard class="notice">
    <div class="title"><span class="item-icon"></span>公 告</div>
    <div class="notice-content">
      <div class="content-title">1.手护贝贝智能支持系统，快捷版更新</div>
      <div class="content-list">
        <p class="item">（1）上新首页功能<span class="time">2019.9.12</span></p>
        <p class="item">
          （2）病种咨询功能更新<span class="time">2019.9.12</span>
        </p>
        <p class="item">
          （3）页面全新升级优化改版，操作简单流畅<span class="time"
            >2019.10.15</span
          >
        </p>
      </div>
    </div>
  </ElCard>
</template>

<script>
export default {
  name: 'Notice'
};
</script>

<style lang="scss">
.notice {
  margin-left: 8px;
  .el-card__body {
    padding: 10px 15px;
    height: 220px;
    box-sizing: border-box;
    .title {
      font-size: 16px;
      border-bottom: 1px dashed #ededed;
      padding-bottom: 10px;
      margin-bottom: 5px;
      .item-icon {
        width: 12px;
        height: 12px;
        margin-bottom: 2px;
        margin-right: 10px;
        display: inline-block;
        border-radius: 100%;
        background-color: #4b90ff;
        vertical-align: middle;
      }
    }
    .notice-content {
      font-size: 14px;
      .content-title {
        color: #6a6a6a;
        padding: 8px 0;
      }
      .content-list {
        color: #b1b1b1;
        .item {
          margin: 0;
          border-top: 1px dashed #ededed;
          padding-top: 15px;
          padding-bottom: 8px;
          &:first-child {
            border-top: 0;
          }
          .time {
            float: right;
          }
        }
      }
    }
  }
}
</style>
